<template>
  <div id="paymentReq">
    <div class="reserveseek" v-if="activeName === '0'">
      <!-- 标头 -->
      <div class="header">
        <div class="header_left">
          <el-button @click="withdraw()" type="primary" plain>新增</el-button>
          <el-button @click="DeletetData()" type="primary" plain
            >删除</el-button
          >
          <el-button @click="CancelReview()" type="primary" plain
            >发起审批</el-button
          >
          <el-button @click="exportDerive()" type="primary" plain
            >导出</el-button
          >
        </div>
        <div class="header_right">
          <el-button
            type="primary"
            size="mini"
            @click="resultClickFn"
            style="margin: 0px 10px 0px 0px"
            >重置</el-button
          >
          <SettinUp
            :settype="21"
            :objSettinUpdata="objSettinUp"
            key="3"
          ></SettinUp>
        </div>
      </div>
      <!-- 表格 -->
      <div class="table" v-if="header_data_list.length > 0">
        <TableHeader
          ref="TableHeaderList"
          :header_data_list="header_data_list"
          :HeaderData="HeaderData"
          :propMap="propMap"
          :objheader="objheader"
          @childEvent="handleDelete"
          @orderIdNumsEvent="handleDeleteType"
          :operation_type="operation_type"
          @handleClickDetail_second="handleClickDetail_second"
          @handleClickEdit_second="handleClickEdit_second"
          particulars="finance_invoice_book_list"
          redact="finance_invoice_book_update"
        ></TableHeader>
      </div>
      <div class="reserveseek_page">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalPage"
        >
        </el-pagination>
      </div>
    </div>
    <div class="reserveseek" v-if="activeName === '1'">
      <!-- 标头 -->
      <div class="header">
        <div class="header_left">
          <!-- <el-button @click="revocation()" type="primary" plain>撤回</el-button> -->
          <el-button @click="exportDerive()" type="primary" plain
            >导出</el-button
          >
        </div>
        <div class="header_right">
          <el-button
            type="primary"
            size="mini"
            @click="resultClickFn"
            style="margin: 0px 10px 0px 0px"
            >重置</el-button
          >
          <SettinUp
            :settype="21"
            :objSettinUpdata="objSettinUp"
            key="3"
          ></SettinUp>
        </div>
      </div>
      <!-- 表格 -->
      <div class="table" v-if="header_data_list.length > 0">
        <TableHeader
          ref="TableHeaderList"
          :header_data_list="header_data_list"
          :HeaderData="HeaderData"
          :propMap="propMap"
          :objheader="objheader"
          @childEvent="handleDelete"
          @orderIdNumsEvent="handleDeleteType"
          :operation_type="operation_type"
          @handleClickDetail_second="handleClickDetail_second"
          @handleClickEdit_second="handleClickEdit_second"
          particulars="finance_invoice_book_list"
        >
        </TableHeader>
      </div>
      <div class="reserveseek_page">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalPage"
        >
        </el-pagination>
      </div>
    </div>
    <div class="reserveseek" v-if="activeName === '2'">
      <!-- 标头 -->
      <div class="header">
        <div class="header_left">
          <el-button @click="exportDerive()" type="primary" plain
            >导出</el-button
          >
        </div>
        <div class="header_right">
          <el-button
            type="primary"
            size="mini"
            @click="resultClickFn"
            style="margin: 0px 10px 0px 0px"
            >重置</el-button
          >
          <SettinUp
            :settype="21"
            :objSettinUpdata="objSettinUp"
            key="3"
          ></SettinUp>
        </div>
      </div>
      <!-- 表格 -->
      <div class="table" v-if="header_data_list.length > 0">
        <TableHeader
          ref="TableHeaderList"
          :header_data_list="header_data_list"
          :HeaderData="HeaderData"
          :propMap="propMap"
          :objheader="objheader"
          @childEvent="handleDelete"
          @orderIdNumsEvent="handleDeleteType"
          :operation_type="operation_type"
          @handleClickDetail_second="handleClickDetail_second"
          @handleClickEdit_second="handleClickEdit_second"
          particulars="finance_invoice_book_list"
        >
        </TableHeader>
      </div>
      <div class="reserveseek_page">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalPage"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import {
  paymentApplyList,
  paymentApplyDelete,
  paymentApplyCancelReview,
  paymentApplySendReview,
  payment_apply_list_export,
} from "@/api/paymentrequest";
import { timestamp10 } from "@/utils/mUtils"; // 时间转化
import TableHeader from "@/page/orderform/components/TableHeader/tableheader.vue";
import SettinUp from "@/page/orderform/components/settingUp/settingUp.vue";
export default {
  name: "paymentReq",
  components: { TableHeader, SettinUp },
  data() {
    return {
      activeName: "0",
      totalPage: 0,
      page: 1,
      page_size: 10,
      tableData: [],
      operation_type: 1,
      status_data: [
        {
          value: "0",
          label: "待审批",
        },
        {
          value: "1",
          label: "审批中",
        },
        {
          value: "2",
          label: "审批通过",
        },
        {
          value: "3",
          label: "已处理",
        },
        {
          value: "4",
          label: "已拒绝",
        },
      ],
      currentPage4: 1,
      header_data_list: [],
      propMap: {},
      obj_list: {},
      HeaderData: [],
      waybillIdNums: [],
    };
  },
  filters: {
    statuData(value) {
      // console.log(value, "rerwer");
      if (value == 0) {
        return "待审批";
      } else if (value == 1) {
        return "审批中";
      } else if (value == 2) {
        return "审批通过";
      } else if (value == 3) {
        return "已处理";
      } else if (value == 4) {
        return "已拒绝";
      }
    },
  },
  mounted() {
    if (this.$route.query.Typedata != undefined) {
      this.activeName = this.$route.query.Typedata + "";
      this.handleClick();
    } else {
      this.activeName = "0";
      this.handleClick();
    }
  },
  watch: {
    $route: {
      handler(newV, oldV) {
        if (this.$route.query.Typedata == 0) {
          this.activeName = "0";
          this.handleClick();
        } else if (this.$route.query.Typedata == 1) {
          this.activeName = "1";
          this.handleClick();
        } else if (this.$route.query.Typedata == 2) {
          this.activeName = "2";
          this.handleClick();
        }
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {
    // 切换
    // 切换
    handleClick() {
      this.PettyList();
      // 调用
      //   if (this.activeName == 0) {
      //     this.$router.push(
      //       { name: "paymentReq", query: { Typedata: this.activeName } },
      //       () => {},
      //       () => {}
      //     );
      //     // this.resultClickFn()
      //   } else if (this.activeName == 1) {
      //     this.$router.push(
      //       { name: "paymentReq", query: { Typedata: this.activeName } },
      //       () => {},
      //       () => {}
      //     );
      //     // this.resultClickFn()
      //   } else if (this.activeName == 2) {
      //     this.$router.push(
      //       { name: "paymentReq", query: { Typedata: this.activeName } },
      //       () => {},
      //       () => {}
      //     );
      //     // this.resultClickFn()
      //   }
    },

    // 备用金列表接口
    PettyList() {
      var param = {
        header_id: 21 + "",
        page: this.page,
        page_size: this.page_size,
        status_list:  this.settingStatus(),
        ...this.obj_list,
      };
      paymentApplyList(param).then((res) => {
        if (res.code == 10000) {
          this.orders = res.data.data || [];
          this.orders.unshift({});
          this.header_data_list = this.orders;
          this.HeaderData = res.data.item_list;
          this.Fntransformation(this.HeaderData);
          this.totalPage = res.data.pagination.total;
        }
      });
    },
    handleSizeChange(val) {
      this.page_size = val;
      this.PettyList();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.PettyList();
    },

    objheader(obj) {
      var data = {
        header_id: 21 + "",
        page: 1,
        page_size: 10,
        status_list:  this.settingStatus(),
        ...obj,
      };
      this.obj_list = obj;
      paymentApplyList(data).then((res) => {
        this.header_data_list = res.data.data;
        if (res.code === 10000 && res.data.data !== null) {
          this.header_data_list.unshift({});
          this.totalPage = res.data.pagination.total;
        } else {
          this.header_data_list = [{}];
          this.paginations.total = 0;
          this.orderslength = 0;
        }
      });
    },
    resultClickFn() {
      this.$refs.TableHeaderList.childMethod();
      this.page_size = 10;
      this.page = 1;
      this.PettyList();
    },
    handleDelete(index, id, type) {
      this.handleJumpDetail(id);
    },
    handleDeleteType(value) {
      this.waybillIdNums = value;
    },
    objSettinUp() {
      this.CapacityList();
    },
    Fntransformation(obj) {
      const result = {};
      for (const prop in obj) {
        if (obj.hasOwnProperty(prop)) {
          if (obj[prop].send_name !== "") {
            result[obj[prop].name] = obj[prop].show_name;
          } else {
            result[obj[prop].name] = obj[prop].name;
          }
        }
      }
      this.propMap = result;
    },
    DeletetData() {
      var param = {
        id: this.waybillIdNums[0] + "",
      };
      paymentApplyDelete(param).then((res) => {
        this.handleClick();
      });
    },
    revocation() {
      var param = {
        id: this.waybillIdNums[0] + "",
      };
      paymentApplyCancelReview(param).then((res) => {
        this.handleClick();
      });
    },
    CancelReview() {
      if (this.waybillIdNums.length > 0) {
        var param = {
          id: this.waybillIdNums[0] + "",
        };
        paymentApplySendReview(param).then((res) => {
          this.handleClick();
        });
      }
    },
    withdraw() {
      this.$router.push({
        name: "paymentReqAdd",
        query: { Type: "0", TageType: this.activeName },
      });
    },
    handleClickDetail_second(val) {
      // console.log(val, "handleClickEdit_second");
      this.$router.push({
        name: "paymentReqAdd",
        query: { Type: 2, id: val.id, TageType: this.activeName },
      });
    },
    handleClickEdit_second(val) {
      // console.log(val, "handleClickEdit_second");
      this.$router.push({
        name: "paymentReqAdd",
        query: { Type: 1, id: val.id, TageType: this.activeName },
      });
    },
    exportDerive() {
      var params = {
        header_id: 21 + "",
        status_list: this.settingStatus(),
        ...this.obj_list,
      };
      payment_apply_list_export(params).then((res) => {
        this.reqUrl = "https://" + res.data.loaded_url;
        window.open(this.reqUrl);
      });
    },
    settingStatus() {
      // 0,4 是待审批的
      var invoice_status = []
      if( this.activeName * 1 == 2 ) {
        invoice_status = [2, 3]
      }else if ( this.activeName * 1 == 0) {
        invoice_status = [0,4]
      } else {
        invoice_status =[ this.activeName * 1]
      }
      return invoice_status
    }
  },
};
</script>
<style scoped lang="less">
// /deep/ .el-tabs__nav-wrap {
//   left: -178px;
// }
::v-deep .el-tabs--border-card {
  -webkit-box-shadow: none;
  box-shadow: none;
  border: none;
}

#paymentReq {
  background-color: #fff;
  padding: 10px 15px;
}

.reserveseek {
  width: 100%;
}

.reserveseek_page {
  display: flex;
  justify-content: flex-end;
  padding: 10px;
}

.reserveseek_button {
  margin-bottom: 10px;
}

.header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.header_right {
  float: right;
  display: flex;
}
</style>